/** @author: duanhaijiao  @date 2022/7/6--14:29 **/

/* name: "searchResult" */
<template>
    <div class="searchResult">
        <Breadcrumb :lineList="lineList"></Breadcrumb>
        <div class="searchResult-con">
            <div class="search-input flex flex-align-center">
                <el-input ref="inputVal" style="width: 400px" :autofocus="autofocus" v-model="keyward" placeholder="请输入内容"></el-input>
                <div class="search-input-btn pointer flex flex-align-center" @click="searchTo">
                    搜索
                </div>
            </div>

            <div class="search-input-result">
                <div class="search-input-result-title bold">
                    搜索结果
                </div>
                <div class="search-input-result-list">
                    <div class="nodata" v-if="resultList.length==0">
                                暂无数据
                    </div>
                    <p class="search-input-result-item flex flex-align-center flex-space-between" @click="toDetail(item)" v-for="item in resultList" :key="item.title">
                        <span class="flex flex-align-center">
                            <i class="search-input-result-item-tip"></i>
                            {{item.title}}
                        </span>
                        <span class="search-input-result-item-time">
                            {{item.time}}
                        </span>
                    </p>
                    <div class="flex" style="margin-top: 20px ;justify-content: center" v-if="resultList.length>0">
                        <el-pagination
                                @current-change="handleCurrentChange"
                                background
                                layout="prev, pager,next, total, jumper"
                                :total="dataTotal">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Breadcrumb from '@/views/components/Breadcrumb.vue'
    import { home } from '@/assets/api/api.js'
    export default {
        name: "searchResult",

        components:{
            Breadcrumb
        },
        data() {
            return {
                lineList:[
                    {path:'/',title:'首页'},
                    {path:'/',title:'搜索'},
                ],
                autofocus:true,
                dataTotal:0,
                pageNum:1,
                pageSize:10,
                keyward:'',
                resultList:[],
            }
        },
        activated() {
            this.$refs.inputVal.focus();
        },
        mounted() {

        },
        methods: {
            toDetail(data){
                this.$store.state.detailId = '';
                this.$store.state.detailId = data.id;
                localStorage.setItem('toShowPageInfo','6666')  //展示文章内容
                this.$router.push('/pathPage/' + data.jumptype + '/' + data.nav_id + '?secId=' + data.category_id)
            },
            searchTo(){
                this.$http(home.searchlist,{
                    name:this.keyward,
                    page:this.pageNum,
                    pageSize:this.pageSize
                }).then((res)=>{
                    this.resultList = res.data.data;
                    this.dataTotal = res.data.total
                })
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.searchTo()
            },
        }
    };
</script>

<style lang="scss">
.searchResult-con{
    padding: 20px;
    .search-input{
        height: 60px;
        background: #F7F8FB;
        justify-content: center;
        .search-input-btn{
            width: 100px;
            justify-content: center;
            background: #245794;
            height: 40px;
            margin-left: 10px;
            color: #fff;
            border-radius: 2px;
        }
    }
    .el-input__inner{
        border-color: #fff;
    }
    .el-input.is-active .el-input__inner, .el-input__inner:focus{
        border-color: #409EFF;
    }
    .search-input-result{
        width: 80%;
        margin:20px auto;
        .search-input-result-title{
            font-size: 20px;
            padding: 30px 0;
            text-align: center;
        }

        .search-input-result-list{
            .nodata{
                margin: 200px 0;
                text-align: center;
            }
            .search-input-result-item{
                margin-bottom:20px;
                .search-input-result-item-tip{
                    width: 3px;
                    height: 3px;
                    border-radius: 50%;
                    margin-right: 4px;
                    background: #666666;
                }
                .search-input-result-item-time{
                    color: #ccc;
                }
            }
        }
    }
}
</style>
